<template>
    <div>
        </br>
        <div>
            <Button @click="onClick" type="primary">
                <span>切换</span>
            </Button>
        </div>
        </br>
        <Carousel v-model="value" loop autoplay v-if="bool">
      <CarouselItem v-for="(item, index) in banner" :key="item.id">
        <div >
            <div class="text">{{item.text}}</div>
        </div>
        <div >
            <span class="id">{{index+1}}</span>/5
        </div>
        <img :src="item.image" />
      </CarouselItem>
    </Carousel>
    </br>
    </br>
    <div>
        <Input size="lagre" placeholder="￥" style="width:200px"></Input>
         — 
        <Input size="lagre" placeholder="￥" style="width:200px"></Input>
        <Button  type="primary">
                <span>搜索</span>
        </Button>
    </div>
    </br>
    </br>
    </br>
    <div style="display:flex;padding: 0 100px;flex-wrap:wrap;">
      <BookPro style="width:420px;" v-for="(item, index) in detail" :itemData="item" :key="index" />
    </div>
    <div v-if="detail.length === 0">暂无数据</div>
    </div>

</template>


<script>
import service from "@/service";
import { mapState,mapActions } from "vuex";
import BookPro from "@/components/BookPro";
export default {
    name:'books',
     components: {
    BookPro
  },
    data(){
        return{
            banner:[],
            bool:true,
            src: "",
            detail: []
        }
  },
  methods:{
       onClick(){
            this.bool = !this.bool;
       }
  },
  computed: {
        ...mapState({
        banner1:(state)=>{
          return state.home.banner
        }
      })
    },
    created() {
      service.get("/v1/book/banner").then(res => {
      this.banner = res;
    })
     service.get("/v1/book/detail").then(res => {
      this.detail = res;
      console.log(res);
    })
   }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 20px;
  margin-bottom: 10px;
}
.id{
    font-size:20px;
    color:red;
}
</style>